<template>
  <div class="content">
    <div class="container">
      <div class="mainform">
        <div class="searchresult">
          <div class="list">
            <li v-for="item in comicsList">
              <div class="item ib">
                <img  @click="goLink ('/detail',item)" class="ib" :src="item.cover">
              </div>
              <div class="info ib">
                <p class="title">{{item.name}}</p>
                <p><span>作者：{{item.author}}</span></p>
                <p><span>分类：{{item.tag}}</span></p>
                <p style="height:50px">
                  <span style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;">
                    {{item.desc}}
                  </span>
                </p>
                <a @click="goLink ('/detail',item)" class="btn">阅读</a>
              </div>
            </li>
          </div>
          <div class="pager" >
            <div v-show="totalCount===0">暂无数据！</div>
            <el-pagination v-show="totalCount!=0" layout="prev, pager, next" :current-page="currentPage" :total=totalCount @current-change="handleCurrentChange"></el-pagination>
          </div>
        </div>
      </div>
      <div class="ib rankNavNew">
        <div class="topBar">
          <i class="icon-rank" style="color:red"></i> 排行榜
        </div>
        <ul>
         <li  :class="{'active':clikme === 1}" @click="toggle(1)"><i class="icon-fire" style="font-size:22px"></i> 人气榜</li>
         <li  :class="{'active':clikme === 2}" @click="toggle(2)"><i class="icon-collect" style="font-size:24px"></i> 收藏榜</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      comicsList:[],
      searchParam:{},
      totalCount:0,
      currentPage: 1,
      clikme: 1
    }
  },
  created(){
    this.getData()
  },
  methods: {
    handleCurrentChange (val) {
      this.searchParam.page = val-1
      this.currentPage = val
      this.getData()
    },
    getData(){
      var _this = this
      this.$ajax.post('/api/getRankComics',_this.searchParam).then(function(response){
        _this.comicsList = response.data.data.content
        _this.totalCount = response.data.data.totalElements
        console.log(response.data)
      }).catch(function(error){console.log(error)})
    },
    toggle (num) {
      this.clikme = num
      if(num === 1){
        this.searchParam.param = '人气榜'
      }else{
        this.searchParam.param = '收藏榜'
      }
      this.getData()
    },
    goLink (path,item) {
      this.$router.push({ 
        path: path,
        query:{cid: item.cid}
      })
    }
  }
}
</script>
<style scoped lang="stylus" rle="stylesheet/stylus">
a
  text-decoration none
.container
  width 1200px
  margin 0 auto
  overflow hidden
  position relative
  .mainform
    padding-top 20px
    width 938px
    padding-bottom 20px
    float right    
    .searchresult
      padding 0 0 20px 0
      border 1px solid #dedede
      padding-bottom 0
      .list
        padding 10px 0
        padding-left 45px
        li
          list-style none
          display inline
          .item
            padding 20px
            padding-right 10px
            cursor pointer
            img
              width 150px
              height 200px
              position relative
          .info
            vertical-align top
            padding-left 15px
            height 200px
            position relative
            width 218px
            p
              font-size 12px
              color #a9a9a9
              margin 8px 0
              span
                width: 195px
                display: inline-block
            .title
              font-size 16px
              padding-bottom 5px
              color #000
              margin-top 25px
            .btn
              cursor pointer
              text-decoration none
              margin 26px 6px
              background #fd113a
              border-radius 3px
              font-size 14px
              color #fff
              height 25px
              line-height 25px
              text-align center
              display inline-block
              padding 0 15px
      .pager
        margin 35px
        text-align center
  .ib
    display inline-block
    zoom 1
  .rankNavNew
    border 1px solid #dedede
    margin-top 20px
    width 240px
    vertical-align top
    .topBar
      text-align center
      padding 15px 0
      border-bottom 1px solid #dedede
    ul
      padding 30px 0
      li
        font-size 16px
        text-align center
        line-height 65px
        height 65px
        cursor pointer
        color #666
      .active
        color #ff5050
</style>
